//vuex 统一状态管理器
import Vue from 'vue'
import Vuex from 'vuex'
//引入 vuex持久化的插件
import createPersistedState from "vuex-persistedstate"
//修改代码
Vue.use(Vuex)

export default new Vuex.Store({
  state: {//状态值
    goods: [] //需要保存的购物车数据
  },
  getters: {//派生状态

  },
  mutations: {//修改状态值
    //添加购物车
    /*state  状态值   ，payload 载荷  */
    ADD_CART(state, payload) {
      //将新的商品添加到 购物车
      state.goods.push(payload);
    },
    //修改购物车
    UPDATE_CART(state, payload) {
      state.goods = payload;
    }
  },
  actions: {//异步处理或大数据量处理 
    //加入购物车的  动作
    //context  里面的commit   将状态值提交到 mutation；item 载荷
    //购物车的逻辑，第一次添加时使用  add，以后任意次添加该商品，都需要使用 update
    ADD_CART_AC(context, item) {
      console.log(context, item);
      //1.将购物车的数据 拷贝一份到 动作里
      var newArr = [...this.state.goods];//数组的深拷贝
      //判断是否是第一次添加
      let index = newArr.findIndex(val => val.item_id === item.item_id);
      console.log(index);//如果购物车中找不到该条记录  会返回 -1 ，如果找到这条记录返回这条记录的下标

      if (index === -1) {//第一次添加购物车
        //将状态值提交到mutations
        context.commit('ADD_CART', item);
      } else {//第二次及以上次添加购物车
        //修改商品数量
        newArr[index].num++;
        context.commit('UPDATE_CART', newArr);
      }




    }

  },
  modules: {//使用子树
  },
  //使用 持久化插件
  plugins: [createPersistedState()]
})
